<template>
    <div class="seach-box">
        <a-form layout="inline" :model="formdata" class="lform" @finish="getOrderList" >
            <a-form-item label="用户名" name="username">
                <a-input placeholder="" v-model:value="formdata.username" />
            </a-form-item>
            <a-form-item label="订单类型" name="type">
                <a-select  v-model:value="formdata.type" style="width:150px">
                    <a-select-option v-for="(item,index) in typeList"  :key="index" :value="item.en">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="支付状态" name="paystatus">
                <a-select v-model:value="formdata.paystatus" class="w100">
                    <a-select-option value="">不限</a-select-option>
                    <a-select-option value="0">未支付</a-select-option>
                    <a-select-option value="1">已支付</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="订单状态" name="status">
                <a-select v-model:value="formdata.status" class="w100">
                    <a-select-option value="">不限</a-select-option>
                    <a-select-option value="0">未办理</a-select-option>
                    <a-select-option value="1">已办理完成</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-button html-type="submit" type="primary">检索</a-button>
            </a-form-item>
        </a-form>
        
    </div>
    <a-table rowKey="orderid" :dataSource="dataList" :pagination="pagination" :bordered="true" :columns="columns">
        <template #type="{record}">
            {{orderType[record['type']]}}
        </template>
        <template #status="{record}">
            {{orderStatus(record['status'])}}
        </template>
        <template #paystatus="{record}">
            {{payStatus(record['paystatus'])}}
        </template>
        <template #action="{record}">            
            <a-button size="small" type="primary" @click="toOperation('orderInfo',record['orderid'])"  shape="round">详情</a-button>
            <a-button size="small" danger class="left15" @click="delOrder(record)"  shape="round">删除</a-button>
        </template>

    </a-table>
    <a-drawer v-model:visible="operationVisible" width="600">
        <router-view @updataList="reloadData"></router-view>
    </a-drawer>
</template>
<style lang="less" scoped>
.seach-box{
    margin-bottom: 12px; 
    .w100{
        width:120px;
    }
}
</style>
<script>
import { defineComponent, reactive,ref, toRaw } from 'vue';
import { orderList,orderDel } from '@/api/order';
import { message } from 'ant-design-vue';
import {PlusOutlined} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';


message.config({top:'200px',duration:1.2});
export default defineComponent({
    components:{PlusOutlined},
    setup() {
        const columns=[
            {
                title:'编号',
                dataIndex:'orderid',
                key:'orderid',
                align:'center',
                width:'100px',
                slots:{}
            },
            {
                title:'提交时间',
                dataIndex:'rq',
                key:'rq',
                align:'center',
                slots:{}
            },
            {
                title:'订单用户',
                dataIndex:'username',
                key:'username',
                align:'center',
                slots:{}
            },
            {
                title:'订单类型',
                dataIndex:'type',
                key:'utype',
                align:'center',
                slots:{customRender:'type'}
            },
            {
                title:'支付状态',
                dataIndex:'paystatus',
                key:'paystatus',
                align:'center',
                slots:{customRender:'paystatus'}
            },
            {
                title:'订单状态',
                dataIndex:'status',
                key:'status',
                align:'center',
                slots:{customRender:'status'}
            },
            {
                title:'金额',
                dataIndex:'money',
                key:'money',
                align:'center',
                slots:{}
            },
            {
                title:'操作',
                dataIndex:'action',
                key:'action',
                align:'center',
                width:'300px',
                slots:{customRender:'action'}
            },
        ];

        const formdata=reactive({username:'',type:'',paystatus:'',status:''});
        const dataList=reactive([]);//数据列表
        const operationVisible=ref(false);
        

        const pagination=reactive({
            page:1,
            total:1,
            defaultPageSize:15,
            showSizeChange:(current,pageSize) =>{
                pagination.page=current;
                pagination.defaultPageSize=pageSize;
                getOrderList();
            },
            onChange:(current,pageSize)=>{
                pagination.page=current;                
                getOrderList();
            }
        });//分页控件

        const orderType=reactive({});//订单类型

        const typeList=reactive([]);//下拉数据

        const router = useRouter();

        const toOperation= (pathname,orderid) =>{
            operationVisible.value=true;
            
            router.push({name:pathname,params:{orderid:orderid}});
        };//调用children操作

        const payStatus= (i) =>{
            return i==0?'未支付':'已支付';
        };//订单状态

        const orderStatus= (i) =>{
            if(i==0)
            {
                return '没办理';
            }
            else if(i==1)
            {
                return '已办理';
            }
            else{
                return '办理失败';
            }
        };

         

        const getOrderList = () =>{
            const obj=toRaw(formdata);
            
            orderList({page:pagination.page,pageSize:pagination.defaultPageSize,...obj}).then(
                res=>{
                    
                    if(res.data['code']===200)
                    {
                        dataList.length=0;
                        Object.assign(dataList,res.data['data']['dataList']);                                     
                        pagination['total']=res.data['data']['total'];
                        
                        if(typeList.length==0)
                        {
                            Object.assign(orderType,res.data['data']['orderType']);
                            typeList.push({name:'不限制',en:''});
                            
                            for(let k in orderType){
                                
                                typeList.push({name:orderType[k],en:k});
                            }
                        }
                    }
                    else{
                        message.error(res.data['msg']);
                    }
                },
                err=>{
                    console.log(err);
                }
            )
        };//返回订单列表

        getOrderList();

        const delOrder=(item) =>{
            if((item['paystatus']==1 || item['status']==1) && item['status']!=2)
            {
                message.warn('当前订单状态不允许删除');                
            }
            else{
                let cs={orderid:item['orderid']};
                console.log(cs);
                orderDel(cs).then(
                    res=>{
                        console.log(resizeBy);
                        if(res.data['code']==200)
                        {
                            message.success('删除成功');
                            getOrderList();
                        }
                        else{
                            message.error(res.data['msg']);
                        }
                    },
                    err=>{
                        console.log(err);
                    }
                )
            }
        };//删除订单

        const reloadData= ()=>{
            getOrderList();
            operationVisible.value=false;

        };


        return{
            columns,dataList,payStatus,orderType,orderStatus,pagination,typeList,formdata,getOrderList,delOrder,operationVisible,reloadData,toOperation
        }
    },
})
</script>
